<!--
 * @Author: your name
 * @Date: 2021-07-21 10:13:56
 * @LastEditTime: 2021-07-26 14:47:03
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \geek-client-mobile\src\views\home\components\article.list.vue
-->
<template>
  <div class="article-list" ref="articleList" @scroll="rememberScroll">
      <!--下拉刷新  -->
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功">
      <!-- 列表组件 ，上拉加载 -->
      <van-list @load="onLoad" v-model="loading" :finished="finished" finished-text="没有更多了">
          <article-item v-for="(item,i) in articles" :key="i" :article="item"/>
      </van-list>
      </van-pull-refresh>
  </div>
</template>
<script>
import ArticleItem from './article-item.vue'
import { getArticlesByChannel } from '@/api/article'
export default {
  name: 'ArticleList',
  components: { ArticleItem },
  props: {
    channelId: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      // 加载状态
      loading: false,
      //   是否全部数据加载完成
      finished: false,
      //   文章列表
      articles: [],
      //   刷新状态
      refreshing: false,
      // 时间戳 当前时间时间戳
      timestamp: Date.now(),
      // 卷曲的高度(阅读的位置)
      scrollTop: 0
    }
  },
  // 阅读位置的记录
  // 1.通过监听article-list滚动事件
  // 2.通过一个数据记录卷曲的高度
  // 3.当组件激活的时候拿数据还原滚动位置
  activated () {
    // console.log(this.scrollTop)
    // 还原之前滚动的位置
    // 当你的dom是隐藏的时候，操作滚动位置是无效的
    // tab 加上 animated 是滑动的切换，所有容器是显示的，操作有效
    this.$refs.articleList.scrollTop = this.scrollTop
  },
  methods: {
    rememberScroll () {
      // 记录阅读位置
      this.scrollTop = this.$refs.articleList.scrollTop
    },
    //   下拉刷新
    async onRefresh () {
      // 模拟发送请求获取数据
    //   setTimeout(() => {
    //     // 结束刷新状态
    //     this.refreshing = false
    //     // 更新数据
    //     const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    //     this.articles = data
    //     // 重置上拉加载完成的状态
    //     this.finished = false
    //   }, 1000)

      // 1. 调用获取文章列表的API函数(新)  设置timestamp是最新时间
      // 2. 结束刷新状态
      // 3. 更新数据
      // 4. 重置上拉加载完成的状态
      // 5. 记录时间戳，为上拉加载准备
      this.timestamp = Date.now()
      const [, res] = await getArticlesByChannel(this.channelId, this.timestamp)
      this.refreshing = false
      this.articles = res.data.data.results
      this.finished = false
      this.timestamp = res.data.data.pre_timestamp
    },
    //   上拉加载
    async onLoad () {
    // 模拟发送请求获取数据
    //   setTimeout(() => {
    //     const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    //     // 结束加载中状态
    //     this.loading = false
    //     if (this.articles.length < 50) {
    //       // 有数据
    //       this.articles.push(...data)
    //     } else {
    //       // 超过50就加载完毕
    //       this.finished = true
    //     }
    //   }, 1000)

      // 1. 调用获取文章列表的API函数
      // 2. 关闭加载状态
      // 3. 判断是否还有数据(下一页)  pre_timestamp 是否是null
      // 4. 如果还有：记录返回的时间戳作为下一次请求的时间戳
      // 5. 如果没有：加载完毕的状态改成true
      // 6. 给articles追加数据，
      const [err, res] = await getArticlesByChannel(this.channelId, this.timestamp)
      if (err) return this.$toast.fail('加载失败')
      this.loading = false
      if (res.data.data.pre_timestamp === null) {
        this.finished = true
      } else {
        this.timestamp = res.data.data.pre_timestamp
      }
      this.articles.push(...res.data.data.results)
    }
  }
}
</script>
<style scoped lang="less">
.article-list {
  height: 100%;
  overflow-y: auto;
  padding: 0 16px;
}
</style>
